﻿<UserControl x:Class="Blacklight.Controls.MediaPlayer"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:Blacklight.Controls"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">
    <UserControl.Resources>
        <Storyboard x:Key="ShowBar">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="barTranslate"
                                           Storyboard.TargetProperty="(TranslateTransform.Y)">
                <SplineDoubleKeyFrame Value="0"
                                      KeyTime="00:00:00.2"
                                      KeySpline="0.528,0,0.142,0.847" />
                <SplineDoubleKeyFrame Value="0"
                                      KeyTime="00:00:03" />
                <SplineDoubleKeyFrame Value="30"
                                      KeyTime="00:00:03.2"
                                      KeySpline="0.528,0,0.142,0.847" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <Border x:Name="root">
        <Border.Clip>
            <RectangleGeometry Rect="0,0,800,600"
                               x:Name="playerClip" />
        </Border.Clip>
        <Grid Background="Black">
            <!-- Main media element -->
            <MediaElement x:Name="media"
                          MediaOpened="Media_MediaOpened"
                          MediaEnded="Media_MediaEnded"
                          MouseMove="Media_MouseMove"
                          MediaFailed="Media_MediaFailed"
                          Volume="11" />
            <!-- Buffering grid (when the media is buffering) -->
            <Grid x:Name="bufferingGrid"
                  Opacity="0"
                  IsHitTestVisible="False">
                <Rectangle Margin="-50">
                    <Rectangle.Fill>
                        <RadialGradientBrush>
                            <GradientStop Color="#cc000000"
                                          Offset="0" />
                            <GradientStop Color="#cc000000"
                                          Offset="3" />
                            <GradientStop Color="#66000000"
                                          Offset="1" />
                        </RadialGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
            </Grid>
            <Grid x:Name="failedGrid"
                  Opacity="0"
                  IsHitTestVisible="False">
                <Rectangle Margin="-50">
                    <Rectangle.Fill>
                        <RadialGradientBrush>
                            <GradientStop Color="#cc000000"
                                          Offset="0" />
                            <GradientStop Color="#cc000000"
                                          Offset="3" />
                            <GradientStop Color="#66000000"
                                          Offset="1" />
                        </RadialGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <StackPanel VerticalAlignment="Center"
                            HorizontalAlignment="Center">
                    <TextBlock     FontFamily="Verdana"
                                   FontSize="11"
                                   Foreground="#D8FFFFFF"
                                   VerticalAlignment="Center"
                                   Margin="0,0,0,5"
                                   Text="failed to load media"
                                   HorizontalAlignment="Center" />
                </StackPanel>
            </Grid>
            <!-- Click to play grid -->
            <Grid x:Name="clickToPlayGrid" Opacity="0">
                <Rectangle Margin="-50"
                           IsHitTestVisible="False">
                    <Rectangle.Fill>
                        <RadialGradientBrush>
                            <GradientStop Color="#cc000000"
                                          Offset="0" />
                            <GradientStop Color="#cc000000"
                                          Offset="3" />
                            <GradientStop Color="#66000000"
                                          Offset="1" />
                        </RadialGradientBrush>
                    </Rectangle.Fill>
                </Rectangle>
                <Border CornerRadius="0,0,0,0"
                        Cursor="Hand"
                        BorderBrush="#D7FFFFFF"
                        BorderThickness="2"
                        Height="120"
                        Width="160"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        Background="#99000000"
                        x:Name="clickToPlayBorder"
                        MouseLeftButtonUp="ClickToPlayBorder_MouseLeftButtonUp">
                    <StackPanel VerticalAlignment="Center"
                                HorizontalAlignment="Center">
                        <Path HorizontalAlignment="Center"
                              VerticalAlignment="Center"
                              Fill="#D8FFFFFF"
                              Stretch="Fill"
                              Data="M43.583637,12.897726 L25.0625,3.5625 L25.0625,21.874741 z"
                              Width="40"
                              Height="40"
                              Margin="0,0,0,15" />
                        <TextBlock     FontFamily="Segoe UI"
                                       FontSize="11"
                                       Foreground="#D8FFFFFF"
                                       VerticalAlignment="Center"
                                       Margin="0,0,0,5"
                                       Text="click play to begin"
                                       HorizontalAlignment="Center" />
                    </StackPanel>
                </Border>
            </Grid>
            <!-- Player bar grid -->
            <Grid VerticalAlignment="Bottom"
                  Height="30"
                  x:Name="bar"
                  MouseEnter="Bar_MouseEnter"
                  MouseLeave="Bar_MouseLeave">
                <Grid.RenderTransform>
                    <TranslateTransform Y="30"
                                        x:Name="barTranslate" />
                </Grid.RenderTransform>
                <Border Padding="5"
                        Background="#99000000">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="*" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <ToggleButton x:Name="playPause"
                                      IsChecked="True"
                                      Margin="0,0,0,0"
                                      Width="40"
                                      Checked="PlayPause_Checked"
                                      Unchecked="PlayPause_Unchecked"
                                      Cursor="Hand">
                            <ToggleButton.Template>
                                <ControlTemplate TargetType="ToggleButton">
                                    <Grid Background="Transparent">
                                        <VisualStateManager.VisualStateGroups>
                                            <VisualStateGroup x:Name="FocusStates">
                                                <VisualState x:Name="Focused" />
                                                <VisualState x:Name="Unfocused" />
                                            </VisualStateGroup>
                                            <VisualStateGroup x:Name="CommonStates">
                                                <VisualState x:Name="Disabled" />
                                                <VisualState x:Name="Normal" />
                                                <VisualState x:Name="MouseOver">
                                                    <Storyboard />
                                                </VisualState>
                                                <VisualState x:Name="Pressed" />
                                            </VisualStateGroup>
                                            <VisualStateGroup x:Name="CheckStates">
                                                <VisualState x:Name="Checked">
                                                    <Storyboard>
                                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="play"
                                                                                       Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                                       BeginTime="00:00:00"
                                                                                       Duration="00:00:00.0010000">
                                                            <SplineDoubleKeyFrame KeyTime="00:00:00"
                                                                                  Value="0" />
                                                        </DoubleAnimationUsingKeyFrames>
                                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="pause"
                                                                                       Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                                       BeginTime="00:00:00"
                                                                                       Duration="00:00:00.0010000">
                                                            <SplineDoubleKeyFrame KeyTime="00:00:00"
                                                                                  Value="1" />
                                                        </DoubleAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Unchecked">
                                                    <Storyboard>
                                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="play"
                                                                                       Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                                       BeginTime="00:00:00"
                                                                                       Duration="00:00:00.0010000">
                                                            <SplineDoubleKeyFrame KeyTime="00:00:00"
                                                                                  Value="1" />
                                                        </DoubleAnimationUsingKeyFrames>
                                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="pause"
                                                                                       Storyboard.TargetProperty="(UIElement.Opacity)"
                                                                                       BeginTime="00:00:00"
                                                                                       Duration="00:00:00.0010000">
                                                            <SplineDoubleKeyFrame KeyTime="00:00:00"
                                                                                  Value="0" />
                                                        </DoubleAnimationUsingKeyFrames>
                                                    </Storyboard>
                                                </VisualState>
                                                <VisualState x:Name="Indeterminate" />
                                            </VisualStateGroup>
                                        </VisualStateManager.VisualStateGroups>
                                        <Border BorderBrush="#D8FFFFFF"
                                                BorderThickness="1,1,1,1"
                                                x:Name="background">
                                            <Grid>
                                                <Path HorizontalAlignment="Center"
                                                      VerticalAlignment="Center"
                                                      Fill="#D7FFFFFF"
                                                      Stretch="Fill"
                                                      Data="M43.583637,12.897726 L25.0625,3.5625 L25.0625,21.874741 z"
                                                      Width="12"
                                                      Height="12"
                                                      x:Name="play" />
                                                <Path HorizontalAlignment="Center"
                                                      VerticalAlignment="Center"
                                                      Fill="#D8FFFFFF"
                                                      Stretch="Fill"
                                                      Data="M9.875,0 L15.875,0 L15.875,16 L9.875,16 L9.875,0 z M0,0 L6,0 L6,16 L0,16 L0,0 z"
                                                      Width="12"
                                                      Height="12"
                                                      x:Name="pause"
                                                      Opacity="0" />
                                            </Grid>
                                        </Border>
                                    </Grid>
                                </ControlTemplate>
                            </ToggleButton.Template>
                        </ToggleButton>
                        <Border Grid.Column="1"
                                Margin="5,0,5,0"
                                BorderBrush="#D8FFFFFF"
                                BorderThickness="1"
                                Height="20">
                            <Canvas x:Name="scrubCanvas"
                                    Background="Transparent"
                                    Cursor="Hand"
                                    MouseLeftButtonDown="ScrubCanvas_MouseLeftButtonDown">
                                <Rectangle x:Name="playPosition"
                                           Fill="#D8FFFFFF"
                                           Height="18"
                                           HorizontalAlignment="Left"
                                           Width="0"
                                           IsHitTestVisible="False" />
                            </Canvas>
                        </Border>
                        <TextBlock x:Name="time"
                                   FontFamily="Segoe UI"
                                   FontSize="10"
                                   Foreground="#D8FFFFFF"
                                   VerticalAlignment="Center"
                                   Margin="5,0,5,0"
                                   Grid.Column="3"
                                   Width="80"
                                   Text="00:00 / 00:00" />
                    </Grid>
                </Border>
            </Grid>
        </Grid>
    </Border>
</UserControl>
